<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            background-color: hotpink;
        }
        
        .message-box {
            padding: 10px 20px;
            background: #4fc08d;
            border: 1px solid #42b983;
        }
        
        .message-box-close {
            float: right;
        }
    </style>
</head>

<body>
    <div id="app">
        <message :show.sync="show">
            <!-- 插槽类别，具名插槽,作用域插槽 -->
            <template v-solt:title="slotProps.title">
                <!-- 取得值message的父组件中的值 -->
                <strong>{{slotProps.title}}</strong>
            </template>
            <template>
                新增成功！
            </template>
        </message>
        <h4 :title="title" :value="title">{{title}}</h4>
        <item-list :someitem="someItem"></item-list>
        <!-- 这里用羊肉串形式来处理。 -->
        <add-item v-model="inputValue" @add-item=addItem></add-item>
        <!-- <h4>课程总数{{someItem.length}}</h4> -->
        <!-- 计算属性用的。 -->
        <!-- <h4>课程总数{{totalNum}}</h4> -->
        <!-- watcher -->
        <h4>课程总数{{totalNum2}}</h4>
    </div>
    <script src="vue.js"></script>
    <script>
        // 组件化列表
        Vue.component("item-list", {
                props: {
                    someitem: {
                        type: Array,
                        default: function() {
                            return []
                        }
                    },
                },
                data() {
                    return {
                        selectItem: '',
                    }
                },
                created() {
                    console.log(this.someItem)
                },
                template: `
                <div>
                    <!-- <ul>
                        <li v-for="(item,id) in someItem" :key="id" :class={active:item===selectItem} @click="selectItem =item">
                            {{ item }}
                        </li>
                    </ul> -->
                    <!-- style样式 -->
                    <h3>列表</h3>
                    <ul>
                        <li v-for="(item,id) in someitem" :key="id" :style='{backgroundColor:(item===selectItem? "pink":"transparent")}' @click="selectItem =item">
                            {{ item }}
                        </li>
                    </ul>
                </div>
            `
            })
            // 组件化添加
        Vue.component("add-item", {
                props: ['value'],
                methods: {
                    addItem() {
                        // console.log(!this.inputValue)
                        // if (this.value) {
                        //     this.$emit("add-item", this.value)
                        // }
                        this.$emit("add-item")
                    },
                    oninput(e) {

                        this.$emit("input", e.target.value)
                    }
                },
                template: `
                <div>
                    <!-- vfor 是一个快捷键指令 -->
                    <input :value="value" type="text" @input="oninput" v-on:keydown.enter="addItem" />{{value}}
                    <button @click="addItem">添加物品</button>
                </div>            
            `
            })
            // 自定义组件，使用插槽  @click="$emit('update:show', false
        Vue.component("message", {
            props: ["show"],
            template: `
                    <div class='message-box' v-if="show">
                        <slot name="title" title="来自message组件的插槽">默认标题</slot>
                        <slot></slot>
                        <span class="message-box-close" @click="$emit('update:show',false)">x</span>
                    </div>
                `
        })

        function getItem() {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve(['洗发水', "手机", "刮胡刀"])
                }, 2000);
            })
        }
        var vm = new Vue({
            el: "#app",
            data: {
                title: "购物车",
                inputValue: '',
                someItem: [],
                totalNum2: "",
                show: false
            },
            async created() {
                let items = await getItem()
                this.someItem = items
            },
            methods: {
                addItem() {
                    this.someItem.push(this.inputValue)
                    this.show = true
                    this.inputValue = ""
                },

            },
            // 计算属性是监听return中监听的数据
            // computed: {
            //     totalNum() {
            //         return this.someItem.length + '个'
            //     }
            // },
            // watch第一次不会触发效果，第二次才会触发,初始化不执行，有情况才执行。
            // watch: {
            //     someItem(newValue, oldValue) {
            //         this.totalNum2 = newValue.length
            //     }
            // },
            watch: {
                someItem: {
                    immediate: true, //立即执行
                    deep: true,
                    handler(newValue, oldValue) {
                        this.totalNum2 = newValue.length
                    }
                }
            },
        })
    </script>
</body>

</html>